<template>
  <div class="vertical-align-flex">
    <div class="field">{{ item.label || item }}：</div>
    <div class="value" v-if="!this.$store.state.user.isMobile">
      <slot name="input-prefix"></slot>
      <div class="relative">
        <input :class="['input-none', 'bottom-line', {'input-long': item.long,'input-danger': error}]"
        :value="value" @input="handleChange" :style="dynamicStyle" :type="hide?'password':''"
        :placeholder="item.pholder" ref="data1" :readonly="disable && hide">
        <img :src="require('@/assets/images/clear.png')" class="input-clear-btn"
        v-show="showcClear1 && eye===undefined" @click="clear('data1')" v-if="">
        <span :class="['input-clear-btn', 'iconfont', {
          'icon-yanjing': hide,     // icon-yanjing1
          'icon-yanjing1': !hide,
        }]" v-if="eye===true" @click="$emit('eye')"></span>
      </div>
      <slot name="suffix"></slot>
      <span class="tip" v-if="item.desc">{{item.desc}}，</span>
      <span class="tip" v-if="item.tip||tip">{{item.tip||tip}}</span>
      <span class="add-input" v-if="item.operate" @click="handleOperate">{{item.operate}}</span>
    </div>
    <div class="value" v-if="this.$store.state.user.isMobile">
      <slot name="input-prefix"></slot>
      <div class="relative">
        <input :class="['input-none', 'bottom-line', {'input-long': item.long, 'input-danger': error}]"
        :value="value" @input="handleChange" :style="dynamicStyle" :type="hide?'password':''"
        :placeholder="item.pholder" ref="data2" :readonly="disable && hide">
        <img :src="require('@/assets/images/clear.png')" v-show="showcClear1 && eye===undefined"
        @click="clear('data2')" class="input-clear-btn" v-if="eye===undefined">
        <span :class="['input-clear-btn', 'iconfont', {
          'icon-yanjing': hide,     // icon-yanjing1
          'icon-yanjing1': !hide,
        }]" v-if="eye===true" @click="$emit('eye')"></span>
      </div>
      <span class="add" v-if="item.operate" @click="handleOperate">{{item.operate}}</span>
    </div>
    <div class="field-tip" v-if="this.$store.state.user.isMobile">
      <span class="tip" v-if="item.desc">{{item.desc}}，</span>
      <span class="tip" v-if="item.tip||tip">{{item.tip||tip}}</span>
    </div>
  </div>
</template>

<script>

  export default {
    data(){
      return {
      }
    },
    props: {
      item: {
        default(){
          return {}
        },
      },
      eye: {

      },
      // 是否隐藏
      hide: {

      },
      value: {

      },
      label: {
        type: String
      },
      tip: {},
      error: { default: false },
      width: { },
      disable: { },
    },
    computed: {
      showcClear1() {
        try {
          if(this.value.length > 0) {
            return true
          } else {
            return false
          }
        } catch (e) {
          return false;
        }
      },
      showcClear2() {
        try {
          if(this.value.length > 0) {
            return true
          } else {
            return false
          }
        } catch (e) {
          return false;
        }
      },
      dynamicStyle() {
        if(this.width) {
          return {
            width: this.width,
          }
        } else {
          return {}
        }
      }
    },
    methods: {
      // 事件处理函数默认接收事件对象为参数
      handleChange(e) {
        this.$emit('input', e.target.value)
      },
      handleOperate(){
        this.$emit('operate')
      },
      clear(target) {
        this.$refs[target].value = ""
        this.$emit('input', '')
      }
    },
    mounted(){
      console.log(this.$store.state.user.isMobile)
    }
  }
</script>

<style lang="scss" scoped>
  .input-clear-btn {
    width: 14px;
    position: absolute;
    right: $clear-btn-pc;
    top: 50%;
    transform: translateY(-50%);
  }
  @media screen and (max-width: 800px){
    .input-clear-btn {
      right: $clear-btn-mp;
    }
  }
</style>
